<!-- nav-fronted -->
<template>
  <div class="nav_bar">
    <div class="unfold" @click="drawer = true">
      <i class="el-icon-menu"></i>
    </div>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false"
      direction="ttb"
    >
    <ul class="drawer_ul">
      <li @click="$router.push('/')">首页 </li>
      <li @click="$router.push('/searchwork')">职位</li>
      <li @click="$router.push('/forum')">论坛</li>
      <li @click="$router.push('/职位管理')">职位管理</li>
    </ul>
      <!-- <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/searchwork">职位</el-menu-item>
        <el-menu-item index="/forum">论坛</el-menu-item>
        <el-menu-item
          index="/myrelease"
          v-if="authority === 'MERCHANT'"
          @click="$router.push('/userProfiles/myRelease')"
          >职位管理</el-menu-item
        > -->
    </el-drawer>
    <div class="nav_left">
      <div class="logo">
        <img
          src="@/assets/img/logo.svg"
          alt="logo"
          @click="$router.push('/')"
        />
      </div>
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        small
        :default-active="activeIndex"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/searchwork">职位</el-menu-item>
        <el-menu-item index="/forum">论坛</el-menu-item>
        <el-menu-item
          index="/myrelease"
          v-if="authority === 'MERCHANT'"
          @click="$router.push('/userProfiles/myRelease')"
          >职位管理</el-menu-item
        >
      </el-menu>
    </div>
    <div class="user" v-if="tokenState === 'notExpired'">
      <el-badge :value="12" class="message">
        <el-button icon="el-icon-message" size="small" circle></el-button>
      </el-badge>
      <el-dropdown @command="handleCommand" trigger="click">
        <el-avatar :size="45" :src="avatar" v-if="avatar"></el-avatar>
        <el-dropdown-menu slot="dropdown" class="dropdown">
          <el-dropdown-item disabled class="name_info"
            >{{ date_type }} {{ username }}</el-dropdown-item
          >
          <el-dropdown-item command="userProfiles" divided
            >查看档案</el-dropdown-item
          >
          <el-dropdown-item command="b">账号设置</el-dropdown-item>
          <el-dropdown-item command="c">帮助中心</el-dropdown-item>
          <el-dropdown-item command="GOADMIN" v-if="authority === 'ADMIN'"
            >进入后台</el-dropdown-item
          >
          <el-dropdown-item command="login_out" divided
            >退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div v-else class="user_login">
      <div class="btn_contain">
        <textHover text="马上加入" @click.native="$router.push('/register')" />
        <el-button
          type="primary"
          class="login_btn"
          @click="$router.push('/login')"
        >
          <a class="fw-a">登录</a>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import textHover from "@/components/textHover/textHover";
export default {
  name: "nav-fronted",
  components: {
    textHover,
  },
  data() {
    return {
      avatar_src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      date_type: "您好",
      activeIndex: "",
      drawer: false,
    };
  },
  computed: {
    ...mapGetters(["username", "authority", "avatar", "tokenState"]),
  },
  mounted() {
    this.date_type_func();
    this.activeIndex = window.location.hash.substring(1);
  },
  methods: {
    date_type_func() {
      let now = new Date();
      let hour = now.getHours();
      if (hour < 6) {
        this.date_type = "凌晨好";
      } else if (hour < 9) {
        this.date_type = "早上好";
      } else if (hour < 12) {
        this.date_type = "上午好";
      } else if (hour < 14) {
        this.date_type = "中午好";
      } else if (hour < 17) {
        this.date_type = "下午好";
      } else if (hour < 19) {
        this.date_type = "傍晚好";
      } else if (hour < 22) {
        this.date_type = "晚上好";
      } else {
        this.date_type = "夜里好";
      }
    },
    handleSelect(key) {
      this.$router.push(key);
    },
    handleCommand(command) {
      switch (command) {
        case "login_out":
          this.$store.dispatch("user/login_out").then(() => {});
          break;
        case "userProfiles":
          this.$router.push("/userProfiles/personalDetails");
          break;
        case "GOADMIN":
          this.$router.push("/admin/main");
        default:
          break;
      }
    },
  },
};
</script>

<style lang='scss' scoped>
@import "@/assets/css/nav-fronted.scss";
</style>